<template>
  <v-row>
    <v-col cols="12">
      <span class="subtitle-2">
        数据日期
        <span>
          {{ items[0].datestr }}
        </span>
      </span>
    </v-col>
    <v-col cols="12" style="display: flex; flex-wrap: nowrap; overflow-x: auto">
      <v-card
        class="tuijian-container"
        v-for="(item, i) in items"
        :color="item.color"
        :key="i"
        tabindex="0"
        role="button"
        :aria-label="item.mulu"
        light
      >
        <div class="nei" @click="to(item._id, item.shijiIndex)">
          <h1 class="subtitle-2 text-center pt-3 px-2 text-no-wrap text-truncate">
            {{ item.mulu }}
          </h1>
          <div class="bfb-container">
            <div class="bfb-text">{{ t("lm.bfzb") }}</div>
            <v-sheet class="bfb" :color="item.color">
              <v-progress-circular :value="item.bfb" color="white" size="60">{{ item.bfb }}</v-progress-circular>
            </v-sheet>
          </div>
        </div>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
import { mapGetters } from "vuex";
import { PLAYNEWPAGENAME } from "@/utils/constant";
export default {
  name: "Jtui-jian",
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["t"]),
  },
  methods: {
    to(id, shijiIndex) {
      this.$router.push({
        name: PLAYNEWPAGENAME,
        params: {
          id,
          gedanid: shijiIndex,
          type: "shiji",
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
$width: 140px;

.tuijian-container {
  width: $width;
  height: $width;
  border-radius: 8px;
  margin-left: 10px;
  padding: 5px;
  &:first-child {
    margin-left: 0px !important;
  }
  .nei {
    width: $width;
    height: $width;
    position: relative;
    .bfb-container {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      align-items: flex-end;
      .bfb-text {
        font-size: 10px;
        font-weight: 300;
      }
      $width: 60px;
      .bfb {
        width: $width;
        height: $width;
        border-radius: $width/2;
      }
    }
  }
}
.v-progress-circular__underlay {
  background-color: black !important;
}
</style>
